<template>
    <div>
        <a-comment v-for="item in comments" :key="item.uid">
            <span slot="actions" @click="replyTo(item.uid)">回复</span>
            <a slot="author">{{item.username}}</a>
            <a slot="author">--{{item.createTime}}</a>
            <a-avatar
                    slot="avatar"
                    :src="item.avatar"
                    :alt="item.username"
            />
            <p slot="content">
                {{item.content}}
            </p>

            <CommentBox class="comment" :userInfo="userInfo" :reply-info="replyInfo" :id="item.uid"
                        @submit-box="submitBox" @cancel-box="cancelBox"></CommentBox>

            <CommentList :comments="item.reply"></CommentList>

        </a-comment>
    </div>
</template>
<script>

    import {mapMutations} from 'vuex';
    import CommentBox from "../comments/CommentBox";
    import { getAction,postAction } from '@/api/manage'
    export default {
        name: "CommentList",
        props: ['comments','planInfoId'],
        data() {
            return {
                showCancle: true,
                submitting: false,
                value: '',
                userInfo: {
                    uid: this.$store.state.user.info.realname,
                    username: this.$store.state.user.info.realname
                },
                replyInfo: {
                    uid: "",
                    blogUid: "uid000003",
                    replyUserUid: 0,
                    avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                },
            };
        },
        created() {

        },
        components: {
            CommentBox
        },

        compute: {},
        methods: {
            ...mapMutations(['setCommentList', 'increment']),
            replyTo: function (uid) {
                var lists = document.getElementsByClassName("comment");
                for (var i = 0; i < lists.length; i++) {
                    lists[i].style.display = 'none';
                }
                document.getElementById(uid).style.display = 'block';
                this.replyInfo.replyUid = uid
            },
            submitBox(e) {
                postAction('/plan/planComment/add', {
                  username: e.username,
                  content: e.content,
                  planInfoId: this.planInfoId,
                  parentId: e.replyUid == 0? -1:e.replyUid
                }).then(res => {
                if (res.success) {
                    e.createTime = '刚刚'
                    // 一级评论
                    if (e.replyUid == 0) {
                        var firstComment = this.$store.state.comment.commentList;
                        firstComment.push(e);
                        this.$store.commit("setCommentList", firstComment);
                        this.$store.commit("increment");

                        return;
                    }

                    document.getElementById(e.replyUid).style.display = 'none'
                    var comments = this.$store.state.comment.commentList;
                    this.updateCommentList(comments, e.replyUid, e)
                    this.$store.commit("setCommentList", comments);
                    this.$store.commit("increment");
                } else {
                    this.$message.warning(res.message)
                }
                }).catch(e => this.$message.warning(e.message || e))

            },
            cancelBox(e) {
                document.getElementById(e).style.display = 'none'
            },
            updateCommentList(commentList, uid, targetComment) {

                if (commentList == undefined || commentList.length <= 0) {
                    return;
                }

                for (let item of commentList) {
                    console.log("递归中", item.uid, uid)
                    if (item.uid === uid) {
                        var menu = item.reply;
                        menu.push(targetComment);
                    } else {
                        this.updateCommentList(item.reply, uid, targetComment);
                    }
                }
            }
        },
    };
</script>
<style>
    .comment {
        display: none;
    }
</style>
